<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>紧急通知</title>
    <style>
        /* 保持原来的样式，只新增必要的 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #c62828, #d32f2f, #f44336);
            color: white;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            user-select: none;
        }
        
        .notification-container {
            text-align: center;
            max-width: 900px;
            padding: 80px 60px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 25px;
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .icon {
            font-size: 4em;
            margin-bottom: 20px;
            animation: iconBlink 1.5s ease-in-out infinite;
        }
        
        @keyframes iconBlink {
            0%, 50% { opacity: 1; transform: scale(1); }
            25% { opacity: 0.7; transform: scale(1.1); }
            75% { opacity: 0.9; transform: scale(0.95); }
        }
        
        .title {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
            letter-spacing: 1px;
        }
        
        /* 新增：通知计数 */
        .notification-count {
            background: rgba(255, 255, 255, 0.2);
            padding: 10px 20px;
            border-radius: 20px;
            margin-bottom: 30px;
            font-size: 1.1em;
        }
        
        /* 新增：通知列表容器 */
        .notifications-list {
            max-height: 400px;
            overflow-y: auto;
            margin-bottom: 30px;
        }
        
        /* 新增：单个通知项 */
        .notification-item {
            background: rgba(255, 255, 255, 0.1);
            margin: 15px 0;
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #fff;
            text-align: left;
        }
        
        .notification-item .time {
            font-size: 0.9em;
            opacity: 0.7;
            margin-bottom: 10px;
        }
        
        .notification-item .message {
            font-size: 1.1em;
            line-height: 1.5;
            white-space: pre-line;
        }
        
        .confirm-btn {
            background: linear-gradient(45deg, #ffffff, #f5f5f5);
            color: #d32f2f;
            border: none;
            padding: 25px 50px;
            font-size: 1.4em;
            font-weight: bold;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 10px;
        }
        
        .confirm-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
        }
        
        .confirm-btn:focus {
            outline: 3px solid rgba(255, 255, 255, 0.5);
            outline-offset: 4px;
        }
        
        .footer {
            margin-top: 40px;
            font-size: 0.9em;
            opacity: 0.8;
            font-style: italic;
        }
        
        /* 新增：滚动条样式 */
        .notifications-list::-webkit-scrollbar {
            width: 6px;
        }
        
        .notifications-list::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        
        .notifications-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="notification-container">
        <div class="icon">🚨</div>
        <div class="title">紧急系统通知</div>
        
        <!-- 新增：通知计数 -->
        <div class="notification-count" id="notification-count">
            共 0 条待处理通知
        </div>
        
        <!-- 新增：通知列表 -->
        <div class="notifications-list" id="notifications-list">
            <!-- 通知项将动态添加到这里 -->
        </div>
        
        <div class="button-container">
            <button class="confirm-btn" id="confirm-button" onclick="confirmFirstNotification()">
                ✓ 处理第一条
            </button>
            <button class="confirm-btn" style="background: #ff9800; font-size: 1.1em; padding: 15px 30px;" onclick="confirmAllNotifications()">
                ✓ 处理所有
            </button>
        </div>
        
        <div class="footer">
            请处理通知后才能继续使用系统
        </div>
    </div>
    
    <script>
        const { ipcRenderer } = require('electron');
        let currentNotifications = [];
        let isProcessing = false;
        
        // 接收通知列表（修改原来的单条接收）
        ipcRenderer.on('show-notifications', (event, notifications) => {
            console.log('收到通知列表:', notifications);
            currentNotifications = notifications;
            updateNotificationDisplay();
        });
        
        // 新增：更新通知显示
        function updateNotificationDisplay() {
            const countElement = document.getElementById('notification-count');
            const listElement = document.getElementById('notifications-list');
            const confirmButton = document.getElementById('confirm-button');
            
            // 更新计数
            countElement.textContent = `共 ${currentNotifications.length} 条待处理通知`;
            
            // 更新列表
            listElement.innerHTML = '';
            currentNotifications.forEach((notification, index) => {
                const notificationDiv = document.createElement('div');
                notificationDiv.className = 'notification-item';
                // notificationDiv.innerHTML = `
                //     <div class="time">#${index + 1} | ${notification.timestamp}</div>
                //     <div class="message">${notification.message}</div>
                // `;
                notificationDiv.innerHTML = `
                    <div class="time">#${index + 1} | ${notification.timestamp}</div>
                    <div style="font-weight: bold; margin-bottom: 5px; color: #ffeb3b;">${notification.title}</div>
                    <div class="message">${notification.message}</div>
                `;
                listElement.appendChild(notificationDiv);
            });
            
            // 更新按钮文本
            if (currentNotifications.length > 0) {
                confirmButton.textContent = `✓ 处理第一条 (${currentNotifications.length} 条待处理)`;
            }
            
            // 滚动到顶部显示最新通知
            listElement.scrollTop = 0;
        }
        
        function confirmFirstNotification() {
            if (isProcessing || currentNotifications.length === 0) return;
            
            isProcessing = true;
            const btn = document.getElementById('confirm-button');
            btn.disabled = true;
            btn.textContent = '处理中...';
            
            // 处理第一条通知
            const firstNotification = currentNotifications[0];
            setTimeout(() => {
                ipcRenderer.send('notification-confirmed', firstNotification.id);
                isProcessing = false;
                btn.disabled = false;
            }, 300);
        }
        
        // 新增：处理所有通知
        function confirmAllNotifications() {
            if (isProcessing || currentNotifications.length === 0) return;
            
            isProcessing = true;
            
            // 依次处理所有通知
            currentNotifications.forEach((notification, index) => {
                setTimeout(() => {
                    ipcRenderer.send('notification-confirmed', notification.id);
                    if (index === currentNotifications.length - 1) {
                        isProcessing = false;
                    }
                }, index * 100);
            });
        }
        
        // 保持原来的键盘事件处理
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !isProcessing) {
                confirmFirstNotification();
                return;
            }
            
            const blockedKeys = ['Escape', 'F4', 'F11', 'Tab'];
            if (blockedKeys.includes(e.key) || 
                (e.altKey && e.key === 'F4') || 
                (e.ctrlKey && ['w', 'q', 'r'].includes(e.key))) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        });
        
        // 保持原来的其他事件处理
        document.addEventListener('contextmenu', e => e.preventDefault());
        document.addEventListener('selectstart', e => e.preventDefault());
        
        console.log('多通知界面已加载完成');
    </script>
</body>
</html>